<template>
	<view class="content">
		<view class="bindtip">风险提示：转拍属于C2C交易，资金不经过平台，平台不会自动扣款，需要您手动自行转账给对方，对方才能收到款项</view>
		<view class="group" v-for="(item,index) in userInfo" :key="index">
			<view class="list">
				<view class="list_name">收款人姓名</view>
				<view class="list_fr">{{item.realName}}
					<!-- <input type="text" class="listInput" placeholder="请输入真实姓名" v-model="name" placeholder-class="pladler"/> -->
				</view>
			</view>
			<view class="list">
				<view class="list_name">开户银行</view>
				<view class="list_fr">{{item.bankName}}
					<!-- <input type="text" class="listInput" placeholder="请输入开户银行" v-model="bank" placeholder-class="pladler"/> -->
				</view>
			</view>
			<view class="list">
				<view class="list_name">银行卡号</view>
				<view class="list_fr">{{item.bankNumber}}
					<!-- <input type="text" class="listInput" placeholder="请输入银行卡号" v-model="bankNum" placeholder-class="pladler"/> -->
				</view>
			</view>
			<view class="list">
				<view class="list_name">银行卡图片</view>
				<view class="list_image">
					<view class="upload" @click="preview(item.image)">
						<image  :src="item.image" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<!-- <view class="list">
				<view class="list_name">验证手机</view>
				<view class="list_code">
					<view class="reg_fl">
						<input type="number" placeholder="请输入验证码" class="input_code" placeholder-class="place"  v-model="code" />
					</view>
					<view class="reg_fr">
						<button class="phone_code " @tap="getCode" :disabled="disabled">{{timeText}}</button>
					</view>
					
				</view>
			</view> -->
			
		</view>
		
		<view class="bottom">
			<view class="submit" @click="getSave">修改</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				bank:'',
				bankNum:'',
				code:'',
				disabled:false,
				timeText:'获取验证码',
				countdown:60,
				userInfo:{},
				image:''
			}
		},
		onLoad() {
			let userInfo = JSON.parse(uni.getStorageSync(this.constant.StorageName.APP_USER_INFO));
			this.userInfo = userInfo.yxUserBank;
			console.log(this.userInfo)
			let that = this;
			uni.$on(that.constant.EventKey.UPDATE_USER_INFO,function(data){
				let userInfo = JSON.parse(uni.getStorageSync(this.constant.StorageName.APP_USER_INFO));
				that.userInfo = userInfo.yxUserBank;
			})
		},
		onUnload() {
			let that = this;
			uni.$off(that.constant.EventKey.UPDATE_USER_INFO);
		},
		methods: {
			// 保存
			getSave: function () {
				let id = this.userInfo[0].id
				uni.navigateTo({
					url: '../bindingBank/bindingBank?id=' + id,
				});
			},
			// 查看大图
			preview: function (imggroup) {
				let imglist = imggroup.split(" ")
				uni.previewImage({
					current: imglist[0],
					loop: true,
					urls: imglist
				})
			}
			
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #212121;
		font-family: 'PingFang SC';
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.bindtip {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		background: #F5F5F5;
		font-size: 26rpx;
		color: #E42221;
	}
	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 0;
			line-height: 80rpx;
			border-bottom: 2rpx solid #F5F5F5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list_fl {
				width: 200rpx;
				box-sizing: border-box;
			}
			.list_fr {
				width: calc(100% - 200rpx);
				box-sizing: border-box;
				.pladler {
					font-size: 30rpx;
					color: #666666;
				}
				.listInput {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
			.list_code {
				width: calc(100% - 200rpx);
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.reg_fr {
					width: 195rpx;
					box-sizing: border-box;
					margin: 0;
					.phone_code {
						width: 100%;
						font-size: 30rpx;
						height: 70rpx;
						line-height: 70rpx;
						color: #E42221;
						background: none;
						padding: 0;
					}
				}
				.reg_fl {
					width: calc(100% - 195rpx);
					box-sizing: border-box;
					padding-right: 5rpx;
					.input {
						width: 100%;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 36rpx;
					}
					.place {
						font-size: 30rpx;
						color: #999999;
					}
				}
			}
			.list_image {
				width: calc(100% - 200rpx);
				box-sizing: border-box;
				.upload {
					width: 140rpx;
					height: 140rpx;
					position: relative;
					image {
						width: 100%;
						height: 100%;
					}
					.closeImg {
						width: 46rpx;
						height: 46rpx;
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						z-index: 10;
					}
				}
			}
		}
		
	}
	.bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 30rpx 50rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 66;
		.submit {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #E42221;
			border-radius: 8rpx;
			line-height: 94rpx;
		}
	}

</style>
